{{define "cp_head"}}{{if not .PartialRequest}}
<!DOCTYPE html>
<html lang="en" class="fixed {{if not .LightTheme}}dark{{else}}sidebar-light{{end}}{{if .SidebarCollapsed}} sidebar-left-collapsed{{end}}">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <!-- Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png?v=6">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png?v=6">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png?v=6">
    <link rel="manifest" href="/static/icons/site.webmanifest?v=6">
    <link rel="mask-icon" href="/static/icons/safari-pinned-tab.svg?v=6" color="#5bbad5">
    <link rel="shortcut icon" href="/static/icons/favicon.ico?v=6">
    <meta name="msapplication-TileColor" content="#2b5797">
    <meta name="msapplication-config" content="/static/icons/browserconfig.xml?v=6">
    <meta name="theme-color" content="#ffffff">

    <!-- More meta stuff -->
    <meta name="apple-mobile-web-app-title" content="YAGPDB">
    <meta name="application-name" content="YAGPDB">
    <meta name="msapplication-config" content="/static/icons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <meta property="og:title" content="YAGPDB" />
    <meta property="og:description" content="Yet Another General Purpose Discord Bot" />

    <title>YAGPDB - Control Panel{{if .ActiveGuild}} | {{.ActiveGuild.Name}}{{end}}</title>
    <meta name="keywords" content="YAGPDB Discord bot control panel" />
    <meta name="description" content="YAGPDB - Yet Another General Purpose Discord Bot">
    <meta name="author" content="jonas747">

    <!-- Web Fonts  -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">

    <!-- Vendor CSS -->
    <link rel="stylesheet" href="/static/vendorr/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="/static/vendorr/animate/animate.css">

    <link rel="stylesheet" href="/static/vendorr/font-awesome/css/all.min.css" />
    <link rel="stylesheet" href="/static/vendorr/magnific-popup/magnific-popup.css" />
    <link rel="stylesheet" href="/static/vendorr/bootstrap-datepicker/css/bootstrap-datepicker3.css" />

    <link rel="stylesheet" href="/static/vendorr/select2/css/select2.css" />
    <link rel="stylesheet" href="/static/vendorr/select2-bootstrap-theme/select2-bootstrap.min.css" />
    <link rel="stylesheet" href="/static/vendorr/bootstrap-multiselect/bootstrap-multiselect.css" />
    <link rel="stylesheet" href="/static/vendorr/pnotify/pnotify.custom.css" />

    <!-- Theme CSS -->
    <link rel="stylesheet" href="/static/css/theme.css?{{.StartedAtUnix}}" />

    <!-- Skin CSS -->
    <link rel="stylesheet" href="/static/css/skins/default.css" />

    <!-- Theme Custom CSS -->
    <link rel="stylesheet" href="/static/css/custom.css?{{.StartedAtUnix}}">

    <!-- Head Libs -->
    <script src="/static/vendorr/modernizr/modernizr.js"></script>

    <script src="/static/vendorr/jquery/jquery.js"></script>

    {{if .ExtraHead}}
        {{.ExtraHead}}
    {{end}}

    <!-- Sam is an okay guy i think, i was forced to say this -->
    <!-- deus name is actually dave -->
    <!-- What are these comments even they are wasted bandwidth, thats what they are -->
    <!-- The current time is 4:14 am on the 21st of may, maybe i just like adding onto this whenever i come across this section after forgetting about it? -->
</head>
<body onbeforeunload="return unsavedChangesAlert()">
    <div id="loading-overlay">
        <section class="card">
            <header class="card-header">
                <h2 class="card-title">
                    Loading...
                </h2>
            </header>
            <div class="card-body d-flex align-items-center">
                <div class="loader"></div>
            </div>
        </section>
    </div>
    <section class="body">
        {{template "cp_nav_header" .}}

        <div class="inner-wrapper">
            {{template "cp_nav_sidebar" .}}

            <section role="main" id="main-content" class="content-body">
{{end}}{{end}}

{{define "cp_footer"}}{{if not .PartialRequest}}
            </section>
        </div>
    </section>
    <div id="unsaved-changes-popup" hidden>
        <div id="unsaved-changes-popup-container">
            <p id="unsaved-changes-message" class="mb-0">blablablablabla</p>
            <input id="unsaved-changes-save-button" type="button" class="btn btn-success ml-3" value="Save!" onclick="saveUnsavedChanges()">
        </p>
    </div>

    <script>
    var visibleURL;
    {{if .VisibleURL }}visibleURL = {{.VisibleURL}};{{end}}
    {{if .ActiveGuild}}
    var CURRENT_GUILDID="{{.ActiveGuild.ID}}";
    {{end}}
    </script>

    <!-- Vendor -->
    <script src="/static/vendorr/jquery-browser-mobile/jquery.browser.mobile.js"></script>
    <script src="/static/vendorr/popper/umd/popper.min.js"></script>
    <script src="/static/vendorr/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/vendorr/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="/static/vendorr/common/common.js"></script>
    <script src="/static/vendorr/nanoscroller/nanoscroller.js"></script>
    <script src="/static/vendorr/magnific-popup/jquery.magnific-popup.js"></script>
    <script src="/static/vendorr/jquery-placeholder/jquery-placeholder.js"></script>
    <script src="/static/vendorr/select2/js/select2.js"></script>
    <script src="/static/vendorr/bootstrap-multiselect/bootstrap-multiselect.js?4"></script>
    <script src="/static/vendorr/pnotify/pnotify.custom.js"></script>

    <!-- Theme Base, Components and Settings -->
    <script src="/static/js/theme.js"></script>

    <!-- Theme Custom -->
    <script src="/static/js/custom.js"></script>

    <!-- Theme Initialization Files -->
    <script src="/static/js/theme.init.js"></script>

    <script src="/static/js/spongebob.js?{{.StartedAtUnix}}"></script>

    {{template "googleAnalytics" .}}
</body>

<script>
    var observer = new MutationObserver(function(mutations) {
        $("a").filter(function(){
            return this.host !== location.host
        }).attr("target","_blank");
    });
    observer.observe(document.querySelector("body"), { childList: true, subtree: true });
</script>

</html>
{{end}}{{end}}

{{/*Displays alerts*/}}
{{define "cp_alerts"}}
<script>
$(function(){
    showAlerts("{{json .Alerts}}");
    $.getJSON("https://srhpyqt94yxb.statuspage.io/api/v2/incidents/unresolved.json", function(data) {
        if (data.incidents) {
            data.incidents.forEach(function(incident) {
                const incidentLink = `<a href="${incident.shortlink}" target="_blank">${incident.name}</a>`
                addAlertHTML("warning", `Discord's ${incident.status} an incident: ${incidentLink}. Functionality may be limited.`);
            })
        }
    });

    {{if .ActiveGuild}}
        async function startShardOfflineChecker() {
            if (typeof window.offlineShardCheckerInterval !== 'undefined') {
                clearInterval(window.offlineShardCheckerInterval);
            }

            let wasOnline = await checkGuildShardOnline();
            window.offlineShardCheckerInterval = setInterval(async () => {
                const currentlyOnline = await checkGuildShardOnline();

                // To prevent spurious warnings during routine shard reconnections,
                // only show an alert if a shard appears to be offline for two
                // checks in a row.
                if (!wasOnline && !currentlyOnline) {
                    upsertAlert(
                        "The shard the bot is on for your server is currently offline; some functionality may not work as expected. \
                        Join the support server for more information if this issue persists."
                    );
                } else {
                    $("#shard-problems-warning").remove();
                }

                wasOnline = currentlyOnline;
            }, 15_000);
        }

        async function checkGuildShardOnline() {
            const status = await fetch("/api/{{.ActiveGuild.ID}}/status.json").then((resp) => resp.json());
            return status.shard_online;
        }

        function upsertAlert(msg) {
            if ($("#shard-problems-warning").length) {
                $("#shard-problems-warning alert").text(msg);
            } else {
                addAlert("warning", msg, "shard-problems-warning");
            }
        }

        startShardOfflineChecker();
    {{end}}
})
</script>
<div id="alerts">
    {{if .Alerts}}
    <div class="row">
        <div class="col-lg-12">
            {{range .Alerts}}
            {{if and (ne .Style "success") (ne .Style "danger")}}
            <div class="alert alert-{{.Style}}">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                {{.Message}}
            </div>
            {{end}}{{end}}
        </div>
    </div>
    {{end}}
</div>
{{end}}

{{/*Help block for templating*/}}
{{define "template_help"}}
<p class="mb-0">To include the user or server in the message you can use the template data included.<br/>
Some quick examples: <code>{{"{{"}}.User.Username{{"}}"}}</code> - will be replaced by username, <code>{{"{{"}}.Server.Name{{"}}"}}</code> - will be replaced by server name, <code>{{"{{"}}.User.ID{{"}}"}}</code> - the user's id and so on...<br/>
For example, to mention a user, you would do <code><@{{"{{"}}.User.ID{{"}}"}}></code>.<br/>
<a href="https://help.yagpdb.xyz" target="_blank">See the documentation for more details</a>
</p>
{{end}}

{{/*Specific template helpers*/}}
{{define "template_helper_user"}}<code>{{"{{"}}.User{{"}}"}}: <a href="https://help.yagpdb.xyz/docs/reference/templates/syntax-and-data/#user"><code>.User</code> object documentation.</a></code>{{end}}
{{define "template_helper_guild"}}<code>{{"{{"}}.Guild{{"}}"}}<a href="https://help.yagpdb.xyz/docs/reference/templates/syntax-and-data/#guild-server"><code>.Guild</code> object reference.</a></code>{{end}}

{{define "set_roles"}}<script>var activeGuildRoles = JSON.parse('{{json .ActiveGuild.Roles}}');</script>{{end}}
